<template>
  <div class="sidebar">
    <ul>
      <!-- 首页 -->
      <li :class="{'active': isActive('HomePage')}">
        <strong><router-link to="/homepage" class="menu-item">首页</router-link></strong>
      </li>
      <!-- 账户管理 -->
      <li :class="{'active': isActive('AccountManagement')}">
        <strong><router-link to="/account-management/user-management" class="menu-item">账户管理</router-link></strong>
        <ul>
          <li :class="{'active': isActive('UserManagement')}">
            <router-link to="/account-management/user-management" class="submenu-item">用户管理</router-link>
          </li>
          <li :class="{'active': isActive('AdminManagement')}">
            <router-link to="/account-management/admin-management" class="submenu-item">管理员管理</router-link>
          </li>
          <li :class="{'active': isActive('admin-login-page')}">
            <router-link to="/account-management/admin-login-page" class="submenu-item">登录日志</router-link>
          </li>
        </ul>
      </li>
      <!-- 内容管理 -->
      <li :class="{'active': isActive('ContentManagement')}">
      <strong><router-link to="/content-management/music-manage" class="menu-item">内容管理</router-link></strong>
        <ul>
          <li :class="{'active': isActive('MusicManage')}">
            <router-link to="/content-management/music-manage" class="submenu-item">歌曲管理</router-link>
          </li>
          <li :class="{'active': isActive('NotationManage')}">
            <router-link to="/content-management/notation-manage" class="submenu-item">乐谱管理</router-link>
          </li>
          <li :class="{'active': isActive('InstrumentManage')}">
            <router-link to="/content-management/instrument-manage" class="submenu-item">乐器管理</router-link>
          </li>
          <li :class="{'active': isActive('TheoryknowledgeManage')}">
            <router-link to="/content-management/theoryknowledge-manage" class="submenu-item">理论知识管理</router-link>
          </li>
          <li :class="{'active': isActive('CultureBackgroundManage')}">
            <router-link to="/content-management/culture-background-manage" class="submenu-item">文化背景管理</router-link>
          </li>
        </ul>
      </li>
      <!-- 评论管理 -->
      <li :class="{'active': isActive('Comment')}">
      <strong><router-link to="/comment/note-comment" class="menu-item">评论管理</router-link></strong>
        <ul>
          <li :class="{'active': isActive('NoteComment')}">
            <router-link to="/comment/note-comment" class="submenu-item">笔记评论</router-link>
          </li>
          <li :class="{'active': isActive('CommentManage')}">
            <router-link to="/comment/comment-manage" class="submenu-item">歌曲评论</router-link>
          </li>
        </ul>
      </li>
      <!-- 笔记管理 -->
      <li :class="{'active': isActive('NotesManagement')}">
      <strong><router-link to="/notes-management/check-manage" class="menu-item">笔记管理</router-link></strong>
        <ul>
          <li :class="{'active': isActive('CheckManage')}">
            <router-link to="/notes-management/check-manage" class="submenu-item">待审核</router-link>
          </li>
          <li :class="{'active': isActive('Approve')}">
            <router-link to="/notes-management/approve" class="submenu-item">已通过</router-link>
          </li>
          <li :class="{'active': isActive('NotApprove')}">
            <router-link to="/notes-management/not-approve" class="submenu-item">未通过</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    // 检查当前路由是否匹配给定的名称
    isActive(route) {
      // 返回当前路由是否匹配给定的路由名称
      return this.$route.name === route;
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 140px;
  height: 90%;
  background: linear-gradient(to right, #f9f4e8, #e8dfca);
  padding: 40px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  font-family: 'KaiTi', serif;
  border-right: 1px solid #d6c8b0;
  margin-left: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
}

li.active > a {
  color: #F2BE45;
  font-weight: bold;
}

a {
  text-decoration: none;
  color: #4b3f33;
  display: block;
  padding: 12px;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-size: 16px;
}

a:hover {
  background-color: #f9f4e8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

ul ul {
  margin-left: 20px;
}
</style>
